//导入node.js中专门操作路径的模块
const path = require('path')
//导入生成预览页面的插件，得到一个构建函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
  template:'./src/index.html',//指定要用到的模板文件
  filename:'index.html' //指定的文件名
})

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VuePlugin = new VueLoaderPlugin()

module.exports = {
  //编译模式
  mode:'development',

  //打包入口文件的路径
  entry: path.join(__dirname,'./src/index.js'),
  output: {
    //输出文件的存放路径
    path: path.join(__dirname,'./dist'),
    //输出文件的名称
    filename: 'bundle.js'
  },

  //plugins 数组是 webpack打包期间会用的一些插件列表
  plugins: [htmlPlugin,VuePlugin],

  //所有第三方文件模块的匹配规则
  module: {
    rules: [
      {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
      {test:/\.lass$/,use:['style-loader','css-loader','lass-loader']},
      {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'},
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.vue$/,loader:'vue-loader'}
    ]
  }


}